<?php $this->_extends('_layouts/user_layout'); ?>

<?php $this->_block('pageCss'); ?>
	<link rel="stylesheet" type="text/css" href="<?php echo $css_url; ?>album.css" />
	<link href='<?php echo $plugin_url; ?>jquery-ui/css/jquery-ui-1.8.21.custom.css' rel='stylesheet' type='text/css' />
<?php $this->_endblock(); ?>

<?php $this->_block('pageJs'); ?>
	<script src="<?php echo $plugin_url; ?>jquery-ui/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
	<script src="<?php echo $js_url; ?>jquery.picportionresize.js" type="text/javascript" ></script>
	<script src="<?php echo $js_url; ?>jquery.easing.js" type="text/javascript" ></script>
	<script src="<?php echo $js_url; ?>jquery.masonry.js" type="text/javascript" ></script>
<?php $this->_endblock(); ?>



<?php $this->_block('title'); ?>
	title text
<?php $this->_endblock(); ?>



		
<?php $this->_block('contents'); ?>

<?php 
	$links = array();
	if(!empty($albums)){
		foreach($albums as $album){
			$link = array(
				'text' => $album['albumname'], 
				'href' => url('album/index', array('uid' => Util::infoEncryption($album['uid']), 'aid' => Util::infoEncryption($album['id'])))
			);
			if(isset($album['active']) && $album['active']) {
				$links['active'] = $link;
			}else{
				$links[] = $link;
			}
		}
	}
	$this->_element('categories', array(
		'links' => $links
	)); 
?>

<script>
	function waterFall(obj, itemSelector)
	{
		if(obj.hasClass('masonry')){
			obj.masonry('reload');
		}else{
			obj.masonry({
				itemSelector: itemSelector,
				singleMode: true,
				resizeable: true,
				animate: true,
				isAnimated: true,
				animationOptions: {
					duration: 390,
					easing: 'linear',
					queue: false
				},
				isFitWidth: true
			}).addClass('masonry');
		}
	}
</script>

<section class="content">
	<div id="photo-size-set" style="position: fixed; left: 20px; top: 20%; height: 60%;"></div>
	<script>
		$( "#photo-size-set" ).slider({ 
			orientation: 'vertical',
			min: 30,
			max: 100,
			step: 1,
			value: 30,
			create: function(){},
			slide: function(event, ui){
				$('section.content article .list img').picPortionResize({
					width: 298 / 0.3 * ui.value / 100,
					maxHeight : 1200,
					keepSmaller: false
				});
				waterFall($('section.content article .list'), '.item');
			}
		});
	</script>

	<article>
		<div class="list">
		</div>
		
		<script><!--
			(function($){
				$.ajax({
					type: 'GET',
					url: '<?php echo url('album/getphotos'); ?>',
					data: {albumId: '<?php echo Util::infoEncryption($albumId); ?>'},
					success: function(data){
						$.each(data, function(k, v){
							var newImg = new Image();
							$(newImg).addClass('photoimg').hide();
							$(newImg).load(function(){
								var article = $('<article class="item" />');// ff_sf_cr_op_box-shadow
								article.append('<div class="meta social-hover"><a rel="external" class="social-icon facebook" href="" target="_blank">Facebook</a><a rel="external" class="social-icon twitter" href="" target="_blank">twitter</a><a rel="external" class="social-icon google" href="" target="_blank">google plus</a><a rel="external" class="social-icon pinterest" href="" target="_blank">pinterest</a></div>');
								
								var a = $('<a class="toggle" href="#" />');
								a.append('<div class="blackFilterIE"></div><div class="hover" title="Kampala, Uganda"><div class="centered"><h3>Kampala, Uganda</h3></div></div>');
								
								$(this).picPortionResize({
									width: 298,
									maxHeight : 600,
									keepSmaller: false
								});
								a.prepend($(this));
								a.prependTo(article);
								article.appendTo('.list');
								$(this).fadeIn();

								waterFall($('section.content article .list'), '.item');	
							});
							$(newImg).bind('error', function(){
								$(this).attr('src', '<?php echo $img_url; ?>img_error.jpg');
							});
							if(v.type == 'local'){
								$(newImg).attr('src', '<?php echo $thumbnailphoto_url; ?>' + v.filename);
							}else{
								$(newImg).attr('src', v.filename);
							}
						});
					},
					dataType: 'json'
				});
			})(window.jQuery);

		--></script>
	</article>
</section>
<?php $this->_endblock('contents'); ?>















